<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="header">
        <nav class="nav">
            <div class="nav-brand">
                <h1>我的博客</h1>
            </div>
            <ul class="nav-menu" id="navMenu">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#blog">博客</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
            <button class="nav-toggle" id="navToggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </nav>
    </header>

    <!-- 首页横幅 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h2>欢迎来到我的博客</h2>
            <p>分享我的思考、学习和生活</p>
            <a href="#blog" class="btn">阅读博客</a>
        </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="about">
        <div class="container">
            <h2 class="section-title">关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://picsum.photos/400/400" alt="个人照片">
                </div>
                <div class="about-text">
                    <h3>你好，我是博主</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 博客文章 -->
    <section id="blog" class="blog">
        <div class="container">
            <h2 class="section-title">最新文章</h2>
            <div class="blog-grid">
                <article class="blog-card">
                    <div class="blog-image">
                        <img src="https://picsum.photos/400/250" alt="博客文章图片">
                    </div>
                    <div class="blog-content">
                        <h3>我的第一篇文章</h3>
                        <p class="blog-date">2023年10月15日</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a href="#" class="read-more">阅读更多</a>
                    </div>
                </article>
                
                <article class="blog-card">
                    <div class="blog-image">
                        <img src="https://picsum.photos/400/250" alt="博客文章图片">
                    </div>
                    <div class="blog-content">
                        <h3>学习前端开发的心得</h3>
                        <p class="blog-date">2023年10月10日</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        <a href="#" class="read-more">阅读更多</a>
                    </div>
                </article>
                
                <article class="blog-card">
                    <div class="blog-image">
                        <img src="https://picsum.photos/400/250" alt="博客文章图片">
                    </div>
                    <div class="blog-content">
                        <h3>旅行中的思考</h3>
                        <p class="blog-date">2023年10月5日</p>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        <a href="#" class="read-more">阅读更多</a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- 联系表单 -->
    <section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title">联系我</h2>
            <form class="contact-form" id="contactForm">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="message">留言</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn">发送消息</button>
            </form>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>